<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Jiahua Shopping</title>

<!-- Main style -->
<link rel="stylesheet" href="css/main.css" type="text/css" />

<!-- Fancybox style -->
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<!-- Product slider style -->
<link rel="stylesheet" href="css/product-slider.css" type="text/css" />

<!-- Style for the superfish navigation menu -->
<link rel="stylesheet" href="superfish/superfish.css" type="text/css" media="screen" />

<!-- Promo slider style -->
<link rel="stylesheet" href="css/megamenu.css" type="text/css" /> 

<!-- Style for Megamenu -->
<link rel="stylesheet" type="text/css" href="css/scrollable-navig.css"/>

<!-- Google font -->
<link href='css/css1.css' rel='stylesheet' type='text/css' />
<link href='css/css2.css' rel='stylesheet' type='text/css' />
<link href='css/css3.css' rel='stylesheet' type='text/css' />

<!-- JS for jQuery -->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<!-- JS for jQuery Product slider -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>

<!-- JS for jQuery Border effect -->
<script type="text/javascript" src="js/jquery.insetBorderEffect.js"></script>

<!-- JS for jQuery Fancy Box -->
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<!-- JS for superfish navigation menu -->
<script type="text/javascript" src="superfish/hoverIntent.js"></script> 
<script type="text/javascript" src="superfish/superfish.js"></script> 

</head>
<body>
	
<div id="container">
	<div class="header-main">
		<div class="logo">
			<a href="index.jsp" name="top"><img src="images/logo.png" alt="logo" border="0"/></a>
		</div>
		
		<!-- login画面 & ショップカー-->
		<div class="login-block">
			<span class="account"><a href="101.regist.jsp" class="account">Sign In</a></span> 
			<span class="cart"><a href="102.cart.jsp" class="cart">My Cart (0)</a></span>
		</div>
	</div>
	
	<!-- navigation -->
	<div id="navigation">
	     <!-- 01 Layer -->
		<div class="search-container">
			<div class="search-inner">	
				<input type="text" value="I am looking for..." onfocus="if(this.value=='I am looking for...'){this.value=''};" onblur="if(this.value==''){this.value='I am looking for...'};" class="search-field"/>
				<input type="submit" id="s_submit" value="" class="search-btn"/>
			</div>
		</div>
		<!-- 02 Layer -->
		<div class="navigation-inner">
			<div class="flare"></div>
			<div class="home-icon"><a href="init.do"><img src="images/home_icon.png" border="0"/></a></div>
			<!-- Navigation start -->
			<ul class="sf-menu">
				<!-- 001.Pages -->
				<li class="nav-item"><a href="#">Pages</a>
					<ul>
						<li class="sfish-navgiation-item"><a href="11.price_compare.jsp">Price Compare Table</a></li>
						<li class="sfish-navgiation-item"><a href="12.faq.jsp">FAQ</a></li>
						<li class="sfish-navgiation-item"><a href="102.cart.jsp">Shopping Cart</a></li>
						<li class="sfish-navgiation-item"><a href="14.right_sidebar.jsp">Right Sidebar</a></li>
					</ul>
				</li>
				<!-- 002.Online Store -->
				<li class="nav-item"><a href="21.grid.jsp">Online Store</a>
					<ul>
						<li class="sfish-navgiation-item"><a href="21.grid.jsp">Product Listing as Grid</a></li>
						<li class="sfish-navgiation-item"><a href="22.list.jsp">Product Listing as List</a></li>
						<li class="sfish-navgiation-item last"><a href="23.details.jsp">Product Details</a></li>
					</ul>	
				</li>
				<!-- 003.Contacts -->
				<li class="nav-item"><a href="contacts.html">Contacts</a></li>
			</ul>
			<!-- Navigation end -->
		</div>
	</div>
	<div id="content">
		<div class="sales-label"></div>
		
		<!-- Promo Begin -->
		<div class="promo-inner" id="promo">
			<!-- main navigator -->
			<!-- root element for the main scrollable -->
			<div id="main">
				<!-- root element for pages -->
				<div style="top: -940px;" id="pages"></div>
			</div>
		</div>
		<!-- End Promo -->

		<div class="shadow"></div>
		<!-- Promo End -->
		
		<!-- Message Begin -->		
		<div class="message">Welcome to this great and sophisticated e-shop. We have prepared an enormous set of features for you!</div>
		<!-- Message End -->
		
		<!-- Bestsellers Begin -->
		<div class="content-top"></div>
		
		<div class="content-inner home">
			<div id="slider-container">
			<div class="slider-nav">
				<a class="prev2"></a>
				<a class="next2"></a>
			</div>

				<div class="slider">   
				   <!-- Listing of the elements of the slider -->
				   <div class="items">
				   
					  <!-- 1-4 -->
					  <div class="group-items">
					  <!-- 
						 <div class="single-item">
							<span class="title"><a href="details.html">Great New Perfume for Her</a></span>
							<span class="price">$149.90</span>
							<img src="images/product1.png" alt="Item"/>
							<a href="#" class="general-button float-left"><span class="button">Add to cart</span></a>
							<span class="list-link">
								<a href="details.html" class="regular">View more...</a>
							</span>
							<br class="clear"/>
						</div>
						 -->
					  </div>
				   </div>
				   <!-- End -->
				</div>
				<br class="clear"/>
			</div>

		</div>
		<div class="shadow"></div>
		<!-- Bestsellers End -->
	
	<div id="footer">
		<div class="footer-main">
			
			<div class="back-to-top"><a href="#top"><img src="images/top.png" alt="Back to top" border="0"/></a></div>
			
			<!-- Footer Column 1 Begin -->
			<div class="left-column float-left">
				<h5>Quick navigation</h5>
				<ul class="footer-nav">
					<li class="first"><a href="#">Customer support 24/7</a></li>
					<li><a href="#">Shipping information</a></li>
					<li><a href="#">Terms and conditions</a></li>
					<li><a href="#">Legal notice</a></li>
					<li><a href="#">Return policy</a></li>
					<li><a href="#">FAQ</a></li>
				</ul>
			</div>
			<!-- Footer Column 1 End -->
			
			<!-- Footer Column 2 Begin -->
			<div class="middle-column float-left">
				<h5>Newsletter</h5>
				<p>Sign up for our newsletter to receive on a regular basis updates, hot offers, site news etc.</p>
				<p class="newsletter">
					<input type="text" value="Enter your e-mail..." onfocus="if(this.value=='Enter your e-mail...'){this.value=''};" onblur="if(this.value==''){this.value='Enter your e-mail...'};" class="newsletter-field"/>
					<input type="submit" id="go" value="GO" class="go-btn"/>
				</p>
			</div>
			<!-- Footer Column 2 End -->
			
			<!-- Footer Column 3 Begin -->
			<div class="left-column float-right">
				<h5>Contact us</h5>
				<p>Paris, France 12009<br/>
					Boulevard de Sevastopol 377, Building A, Office 177
				</p>

				<p>
					Phone: +33 123 456 and +33 456 789<br/>
					Fax: +33 123 456<br/>
					Email: <a href="#" class="footerlink">info@yoursite.com</a><br/>
				</p>
				<p>
					<a href="#" class="social"><img src="images/facebook.png" alt="facebook" border="0"/></a>
					<a href="#" class="social"><img src="images/vimeo.png"    alt="vimeo" border="0"/></a>
					<a href="#" class="social"><img src="images/youtube.png"  alt="youtube" border="0"/></a>
					<a href="#" class="social"><img src="images/twitter.png"  alt="twitter" border="0"/></a>
					<a href="#" class="social"><img src="images/google.png"   alt="google" border="0"/></a>
				</p>
			</div>
			<!-- Footer Column 3 End -->
		</div>
	</div>

</div>

<!-- JavaScript -->
<script type="text/javascript">

	// Megamenu
	$(function() {
						
		var $menu = $('#ldd_menu');
		
		$menu.children('li').each(function(){
			var $this = $(this);
			var $span = $this.children('span');
			$span.data('width',$span.width());
			
			$this.bind('mouseenter',function(){
				$menu.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':'auto'},150,function(){
					$this.find('.ldd_submenu').slideDown(300);
				});
			}).bind('mouseleave',function(){
				$this.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':$span.data('width')+'px'},300);
			});
		});
	});
	
	$(document).ready(function() {
		
		// Border effects
		$("#main_navi li img").insetBorder({
			borderColor : '#EDE6E9',
			inset: 4
		});
		
		// Navigation menu
		$('ul.sf-menu').superfish({ 
			delay: 100
		});  
		
		// Slider
		$(".slider").scrollable({
			next: '.next2', 
			prev: '.prev2'
		});
	
		// Fancybox
		$("a.grouped-elements").fancybox({
			'titlePosition'	: 'inside'
		});

		$("a[rel=group4]").fancybox({
			'transitionIn'		: 'none',
			'transitionOut'		: 'none',
			'titlePosition' 	: 'over',
			'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
				return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
			}
		});
		
		// Mouseover effect for thumbnails
		$("a.grouped-elements").hover(function() {
			  $(this).find(".imagehover").toggleClass("mouseon");
		});
		
	});

	$(window).load(function() {
		// Main Promo Scroller
		$("#main").scrollable({

			vertical: true,
			keyboard: 'static',
			onSeek: function(event, i) {
				horizontal.eq(i).data("scrollable").focus();
			}
		
		}).navigator("#main_navi");

		var horizontal = $(".scrollable").scrollable({ circular: true }).navigator(".navi");
		horizontal.eq(0).data("scrollable").focus();
	});
	
</script>

</body>
</html>